<template>
  <el-container style="margin: 25px 15px">
    <!-- 左边科室树形显示 -->
    <el-aside width="200px;" style="overflow: auto;">

      <el-input placeholder="输入名称进行查询" v-model="filterText">
      </el-input>

      <el-tree class="filter-tree" :data="treeData" :props="defaultProps" :filter-node-method="filterNode" ref="tree"
        accordion @node-click="handleNodeClick" highlight-current>
      </el-tree>

    </el-aside>
    <el-container>
      <!-- 上面时间显示 -->
      <el-header>
        <el-tag v-for="(item,index) in content" :key="item.workDate" :type="index == tagType ? '' : 'info'"
          effect="plain" size='125px' @click="tagClick(item.workDate,index)"
          style="height: 60px;font-size: 15px;margin: 8px;cursor: pointer;">
          {{item.workDate}} {{item.dayOfWeek}} <br />
          {{item.availableNumber}} / {{item.reservedNumber}}
        </el-tag>

      </el-header>

      <!-- 中间预约安排表格内容显示 -->
      <el-main>
        <div v-show="tagType != -1">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page.sync="currentPage" :page-size="limit" layout="prev, pager, next, jumper" :total="total">
          </el-pagination>
          <el-divider></el-divider>
          当前选择: {{hosname}} / {{depname}} / {{workDate}}
          <el-divider></el-divider>
        </div>
        <el-table :data="tableData" style="width: 100%" border v-show="tagType != -1">
          <el-table-column type="index" label="序号" width="100">
          </el-table-column>
          <el-table-column prop="title" label="职称" width="150">
          </el-table-column>
          <el-table-column prop="workTime" label="号源时间" :formatter="formatWorkTime" width="120">
          </el-table-column>
          <el-table-column prop="reservedNumber" label="可预约数" width="120">
          </el-table-column>
          <el-table-column prop="availableNumber" label="剩余可预约数" width="120">
          </el-table-column>
          <el-table-column prop="amount" label="挂号费" width="100">
          </el-table-column>
          <el-table-column prop="skill" label="擅长技能" width="380">
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
    <router-link :to="'/hospSet/hospitalList'">
      <el-button type="success">返回列表</el-button>
    </router-link>
  </el-container>
</template>

<script>
import apiObj from '../../api/hospital/department'

export default {
  watch: {
    filterText (val) {
      this.$refs.tree.filter(val);
    }
  },
  data () {
    return {
      filterText: '',
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'depname',
        id: 'depcode'
      },
      currentPage: 1,
      limit: 5,
      total: 0,
      hoscode: '',
      content: [],
      hosname: '',
      depcode: '',
      depname: '',
      tagType: -1,
      workDate: '',
      tableData: [],
    }
  },
  methods: {
    // 排班时间
    formatWorkTime: function (row, column) {
      return row.workTime == 1 ? '下午' : '上午'
    },
    // 节点过滤的方法
    filterNode (value, data) {
      if (!value) return true;
      return data.depname.indexOf(value) !== -1;
    },
    // 查询科室的方法
    showDepartments (hoscode) {
      apiObj.showDepartments(hoscode).then(({ data }) => {
        this.treeData = data.data
      }).catch(e => {
        this.$message.error("出现错误")
      })
    },
    // 点击节点时的函数
    handleNodeClick (data) {
      if (data.children == null) {
        this.depcode = data.depcode
        this.depname = data.depname
        this.tableData = []
        this.workDate = ''
        this.showWorkDateList(this.depcode)
      }

    },
    // 查询排班日期的分页方法
    showWorkDateList (depcode) {
      apiObj.findSchedulePage(this.currentPage, this.limit, this.hoscode, depcode).then(({ data }) => {
        this.content = data.content
        this.total = data.total
        this.hosname = data.hospital.hosname
        // 如果不为空，则查第一条
        if (data.content != null) {
          this.workDate = data.content[0].workDate
          this.tagType = 0
          this.showScheduleByWorkDate()
        }
      }).catch(e => {
        this.$message.error("出现错误,请稍后再试")
      })
    },
    // 分页改变的方法
    handleCurrentChange (val) {
      this.currentPage = val
      this.showWorkDateList(this.depcode)
    },
    handleSizeChange (val) {
      this.limit = val
      this.showWorkDateList(this.depcode)
    },
    // 点击日期查看排班信息
    tagClick (workDate, index) {
      this.workDate = workDate
      this.tagType = index
      this.showScheduleByWorkDate()
    },
    // 查询排班的方法
    showScheduleByWorkDate () {
      apiObj.showScheduleByWorkDate(this.hoscode, this.depcode, this.workDate).then(({ data }) => {
        this.tableData = data.data
      }).catch(e => {
        this.$message.error("出现错误")
      })
    },
  },
  // 加载方法
  created () {
    this.hoscode = this.$route.params.hoscode
    this.showDepartments(this.hoscode)
  }
}
</script>
<style>
</style>